<template>
  <nav>
    <ul>
      <li>
        <router-link to="/city-list">{{'北京'}}</router-link>
        <span class="icon-arrow-bottom"></span>
      </li>
      <li class="sub-tab-container">
        <tabs v-model="active">
          <tab v-for="{title,to} in tabs" :key="title" :title="title" :to="to"></tab>

        </tabs>
      </li>
      <li>
        <icon name="search" size="0.2rem" color="#e54847"/>
      </li>
    </ul>
  </nav>
</template>

<script>
import { Icon,Tabs,Tab } from "vant";
export default {
  name: "SubTab",
  components: {
    Icon,
    Tabs,
    Tab
  },
  props: {},
  data: function() {
      const tabs=[
          {
              title:'正在热映',
              to:'/home/movie/hot'
          },
          {
              title:'即将上映',
              to:'/home/movie/comingSoon'
          }
      ];


    return {
        tabs,
      active:tabs.findIndex(({to})=>{
          return this.$route.path.includes(to);
      })
    };
  }
};
</script>
<style lang="scss" scoped>
nav {
  width: 100%;
  bottom: 0;
  height: 0.6rem;
  font-size: 0.18rem;
  color: #666666;
  padding: 0 0.15rem;
  ul {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    li {
      flex: 0;
      list-style: none;
      min-width: auto;
      flex-basis: auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      &.sub-tab-container{
        flex:1;
        padding:0 0.25rem;
        ::v-deep .van-tabs{
          width: 100%;
          .van-tabs__nav{
            background: transparent;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          }
          .van-tab{
            font-size: 0.18rem;
          }
        }
      }
    }
  }
}
</style>
